<template>
  <div class="format-number">
    <a-select
      v-model:value="val.type"
      :options="options"
      placeholder="请选择"
    />
    <div class="choose">
      <div class="decimals">
        <a-checkbox v-model:checked="val.isShowDecimal">小数位数</a-checkbox>
        <a-input-number
          v-if="val.isShowDecimal"
          size="small"
          v-model:value="val.decimals"
        />
      </div>
      <a-checkbox
        v-if="val.type === 'data'"
        v-model:checked="val.isShowThousand"
        >显示千分位分隔符</a-checkbox
      >
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'FormatNumber',
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    controls: {
      type: Object,
      default: () => ({}),
    },
    controlKey: {
      type: String,
      default: () => '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    const val = computed({
      get: () => props.value,
      set: (val) =>
        context.emit('updateValue', val, props.controlKey, props.controls),
    });

    return {
      val,
    };
  },
});
</script>

<style lang="less" scoped>
.format-number {
  .ant-select {
    width: 100%;
    font-size: 12px;
    overflow: hidden;
  }
  .choose {
    .flexColumn(flex-start, flex-start);
    .decimals {
      margin-bottom: 4px;
    }
  }
  :deep .ant-select-selector {
    border-radius: 4px;
  }
}
</style>
